import { Component } from 'react'
import { View, Text, ScrollView, Image } from '@tarojs/components'
import { AtButton, AtInput, AtIcon } from 'taro-ui'
import { observer, inject } from 'mobx-react'
import Taro from '@tarojs/taro'
import IconFont from '../../components/iconfont';
import cls from 'classnames'
import './index.less'

@inject('store')
@observer
export default class Index extends Component {

  state = {
    idNumber: '',
    realName: '',
    loading: false
  }

  onRealNameChange = (realName) => {
    this.setState({
      realName
    })
  }

  onIdNumberChange = (idNumber) => {
    this.setState({
      idNumber
    })
  }

  handleSubmit = async () => {
    const { idNumber, realName, loading } = this.state
    if (!realName) {
      Taro.showToast({
				title: '真实姓名不能为空',
				icon: 'none',
				duration: 2000
			})
      return
    }

    if (!idNumber) {
      Taro.showToast({
				title: '身份证号不能为空',
				icon: 'none',
				duration: 2000
			})
      return
    }
    const params = {
      accountId: this.props.store.userInfo.id,
      idNumber,
      realName
    }

    if (loading) {
      return
    }

    this.setState({
      loading: true
    })

    const { success, data } = await Taro.request({
      method: 'post',
      url: '/api/account/real/name/certification',
      data: params
    })
    if (success) {
      Taro.showToast({
				title: '提交成功',
				icon: 'none',
				duration: 2000
			})
    }
    this.setState({
      loading: false
    })
  }

  render () {
    const { idNumber, realName } = this.state

    return (
      <View
        className='realName-certification-page'
      >
        <View className='page-tip-desc'>
          为了你的交友安全，请完善实名信息
        </View>
        <View className='form-list'>
          <View className='form-list-item'>
            <AtInput
              required
              border={false} 
              name='realName' 
              title='真实姓名' 
              type='text' placeholder='请输入' 
              value={realName} 
              onChange={this.onRealNameChange} 
              />
          </View>

          <View className='form-list-item'>
            <AtInput
              required
              border={false}  
              name='idNumber'
              title='身份证号' 
              type='text' placeholder='请输入' 
              value={idNumber} 
              onChange={this.onIdNumberChange} />
          </View>

          <View className='form-list-submit' onClick={this.handleSubmit}>
            立即认证
          </View>
        </View>
      </View>
    )
  }
}